<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: #efd631;color: white;">
                <div style="padding-top: 15px;">
                    <span style="font-size: 28px;font-family: '华文彩云';">{{shop.shopname}};电话:{{shop.phone}}</span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-scrollbar>
                        <el-menu default-active="/admin/user" :router="true" background-color="#f2f2f2">
                            <el-menu-item index="/admin/Delivery">
                                主食
                            </el-menu-item>
                            <el-menu-item index="/admin/userAnalysis">
                                饮料
                            </el-menu-item>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column type="index" lable="序号" width="80"/>
                            <el-table-column prop="id" label="ID"/>
                            <el-table-column prop="name" label="菜名称" />
                            <el-table-column prop="price" label="价格" />
                            <el-table-column prop="dishes_class" label="菜类别" />
                            <el-table-column prop="state" label="状态" />
                            <el-table-column label="已选数量" width="300">
                                <template #default="scope">
                                    <el-button type="danger" @click="jian(scope.row.id)">减购</el-button>
                                    {{scope.row.count}}
                                    <el-button type="success" @click="add(scope.row.id)">加购</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        总价：{{money}}元. <el-button type="primary" @click="quzhifu(shop,tableData,money)">去支付</el-button>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>

    <!-- 选好食物下单 dialog-->
    <el-dialog v-model="PlaceOrder" title="已选美食" width="60%" top="2vh" destroy-on-close>
        <yao-zhi-fu ref="ZhiFu"
                    @closeDialog="PlaceOrder = false">
        </yao-zhi-fu>
    </el-dialog>
</template>

<script setup lang="ts">
import {inject, nextTick, onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import axios from 'axios';
import YaoZhiFu from "./YaoZhiFu.vue";
const shop=ref({
    id: '',
    shopname: '',//店铺名称
    pwd: '',
    checked: '', //审核状态
    score: '',//评分
    phone: '',// 手机
    address: '',// 地址
    state: '',//状态
    picture: '',// 图片
    income: '',//收入
});
const dishes=ref({
    id: '',
    name: '',//菜名称
    shop_id: '',//店铺id
    price: 0,// 价格
    state: '',//状态
    picture: '',// 图片
    dishes_class: '',//菜类别
});

const car=ref({
    id: '',
    car_num: '',
    user_name: '',
    shop_name: '',
    dish_name: '',
    num: '',
    money: '',
});
const jiangou=ref(false);
const tableData=ref([]);
const gwl=ref([]);
const money=ref(0);

//--------------------------获取用户信息-----------------------
const user=ref({});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    user.value=data;
    car.value.user_name=user.value.id;
}

//---------------------- 查询 ------------------------------
const doList=async ()=>{
    const {data} = await axios.get('/api/dishes/shop',{params:shop.value});
    tableData.value = data;
    for(var i=0;i<tableData.value.length;i++){
        tableData.value[i].price=parseInt(tableData.value[i].price);
        tableData.value[i].count=0;
    }
    doCar();
};
//---------------------- 获取购物车信息 ------------------------------
const carData=ref([]);
const doCar=async ()=>{
    car.value.shop_name=shop.value.id;
    car.value.user_name=user.value.id;
    const {data} = await axios.get('/api/car/selectCars',{params:car.value});
    carData.value = data;
    console.log(carData.value);
    for(var i=0;i<carData.value.length;i++){
        for (var j=0;j<tableData.value.length;j++){
            if(tableData.value[j].id==carData.value[i].dish_name){
                tableData.value[j].count=carData.value[i].num;
                money.value+=tableData.value[j].price*tableData.value[j].count;
            }

        }
    }
};
//---------------------- 减购 ------------------------------
const jian=async (id)=>{
    for(var i=0;i<tableData.value.length;i++)
        if(tableData.value[i].id==id&&tableData.value[i].count>0) {
            car.value.dish_name=tableData.value[i].id;
            car.value.shop_name=shop.value.id;
            car.value.user_name=user.value.id;
            car.value.money=tableData.value[i].price;
            const {data} = await axios.get('/api/car/jian',{params:car.value});
            tableData.value[i].count--;
            money.value-=tableData.value[i].price;
            break;
        }
};
//---------------------- 加购 ------------------------------
const add=async (id)=>{
    for(var i=0;i<tableData.value.length;i++)
        if(tableData.value[i].id==id) {
            car.value.dish_name=tableData.value[i].name;
            car.value.shop_name=shop.value.id;
            car.value.user_name=user.value.id;
            car.value.money=tableData.value[i].price;
            console.log(car.value);
            const {data} = await axios.get('/api/car/exist',{params:car.value});
            tableData.value[i].count++;
            money.value+=tableData.value[i].price;
            break;
        }
};

//--------------------- 传入商家信息 ------------------------------
const handleUpdateData = (obj) => {
    shop.value= obj;
    acquireUsers();
    doList();
}
onMounted(()=>{
    acquireUsers();

})
// -------------------------暴露给父组件使用的方法
defineExpose({
    handleUpdateData,
})

// -------------------------去支付 对话框---------------------
const PlaceOrder = ref(false);
const ZhiFu = ref(); // 组件引用
const quzhifu=async (obj1,obj2,obj3)=>{
    PlaceOrder.value = true;
    nextTick(()=>{
        ZhiFu.value.updateData(obj1,obj2,obj3);
    })
}

</script>

<style scoped>
#photoPanel {
    padding-top: 10px;
    text-align: center;
}

#photoPanel #online {
    font-size: 20px;
    color: #5CB85C;
}
</style>